<template>
<div class="fillContainer">
    <div>
        <el-form :inline="true" ref="add_data" :model="search_data">
            <el-form-item label="按照时间筛选：">
                <el-date-picker
                    v-model="search_data.startTime"
                    type="datetime"
                    placeholder="选择开始时间"
                    >
                </el-date-picker>
                --
                <el-date-picker
                    v-model="search_data.endTime"
                    type="datetime"
                    placeholder="选择结束时间"
                    >
                </el-date-picker>

                <el-form-item class="search">
                    <el-button type="primary" size="small" icon="search" @click="handleSearch">筛选</el-button>
                </el-form-item>
            </el-form-item>
            <el-form-item class="btnRight">
                <el-button 
                type="primary" 
                size="small" 
                icon="view"
                v-if="user.identify == 'manager'"
                 @click="handleAdd">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table_container">
        <el-table
        v-if="tableData.length > 0"
            :data="tableData"
            max-height="450"
            border
            style="width: 100%">

            <el-table-column
            type="index"
            prop="id"
            align="center"
            label="序号"
            width="70">
            <template slot-scope="scope">
                {{ scope.row.id }}
            </template>
            </el-table-column>

            <el-table-column
            prop="date"
            align="center"
            label="创建时间"
            width="250">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>

            <el-table-column
            prop="type"
            align="center"
            label="收支类型"
            width="150"
            >
            </el-table-column>

            <el-table-column
            prop="describe"
            align="center"
            label="收支描述"
            width="180"
            >
            </el-table-column>

            <el-table-column prop="income" label="收入" align="center" width="170">
            <template slot-scope="scope">
                <span style="color: #00d053">+ {{ scope.row.income }}</span>
            </template>
            </el-table-column>
            <el-table-column prop="expend" label="支出" align="center" width="170">
            <template slot-scope="scope">
                <span style="color: #f56767">- {{ scope.row.expend }}</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="cash"
            align="center"
            label="账户现金"
            width="170"
            >
            <template slot-scope="scope">
                <span style="color: #4db3ff">{{ scope.row.cash }}</span>
            </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center" width="220">
            </el-table-column>
            <el-table-column
            prop="operation"
            align="center"
            label="操作"
            fixed="right"
            width="320"
            v-if="user.identify == 'manager'"
            >
            <template slot-scope="scope">
                <el-button type="warning" icon="edit" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                type="danger"
                icon="delete"
                size="small"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
                >
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
            <el-col :span="24">
                <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="paginations.page_index"
                        :page-sizes="paginations.page_sizes"
                        :page-size="paginations.page_size"
                        :layout="paginations.layout"
                        :total="paginations.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        
    </div>
    <Dialog :dialog="dialog" :formData="formData" @update="getProfile"></Dialog>
</div>
</template>

<script>
import Dialog from '../components/Dialog.vue'
// import Dialog from '../components/Dialog.vue'
export default {
    name: 'FundList',
    components: {
    Dialog,
    // Dialog
},
    data(){
        return{
            search_data: {
                startTime:'',
                endTime: ''
            },
            filterTableData: [],
            paginations: {
                page_index: 1,  // 当前页
                total: 0,  // 总数
                page_size: 5,  // 默认每页显示多少条
                page_sizes: [5, 10, 15, 20],  // 选择每页显示多少条
                layout: "total, sizes, prev, pager, next, jumper"
            },

            tableData: [],
            allTableData: [],
            formData: {
                type: '',
                describe: "",
                income: "",
                expend: "",
                cash: "",
                remark: "",
                id: ''
            },
            dialog: {
                show: false,
                title: '',
                option: 'edit'
            }
        }
    },
    computed: {
        user(){
            return this.$store.getters.user;
        }
    },
    created() {
        this.getProfile()
    },
    methods: {
        getProfile(){
            this.$axios.get('/profiles')
            .then(res => {
                // console.log(res)
                this.allTableData = res.data
                this.filterTableData = res.data
                this.setPaginations()
                
            })
            .catch(err => {
                console.log(err)
            })
        },
        setPaginations(){
            this.paginations.total = this.allTableData.length
            this.paginations.page_index = 1
            this.paginations.page_size = 5
            this.tableData = this.allTableData.filter((item, index) => {
                return index < this.paginations.page_size
            })
        },

        handleEdit(index, row){
            // console.log(index)
            // console.log(row)
            // console.log(this.dialog)
            this.dialog = {
                show: true,
                title: '修改资金信息',
                option: 'edit'
            }
            this.formData = {
                type: row.type,
                describe: row.describe,
                income: row.income,
                expend: row.expend,
                cash: row.cash,
                remark: row.remark,
                id: row.id
            }
        },
        handleDelete(index, row){
            // console.log(index)
            // console.log(row)
            this.$axios.get(`/profiles/delete/${row.id}`)
            .then(res => {
                this.$message('删除成功')
                this.getProfile()
            })
        },
        handleAdd(){
            // this.dialog.show = true
            this.dialog = {
                show: true,
                title: '添加资金信息',
                option: 'add'
            }
            this.formData = {
                type: "",
                describe: "",
                income: "",
                expend: "",
                cash: "",
                remark: "",
            }
        },
        handleSizeChange(page_size){
            this.paginations.page_index = 1
            this.paginations.page_size = page_size
            this.tableData = this.allTableData.filter((item, index) => {
                return index < page_size
            })

        } ,
        // 页面跳转
        handleCurrentChange(page){
            const index = this.paginations.page_size * (page - 1)
            const nums = this.paginations.page_size * page
            const tables = []
            for(let i = index; i < nums; i++){
                if(this.allTableData[i]) tables.push(this.allTableData[i])
            }
            this.tableData = tables
        },
        
        // 选择时间
        handleSearch(){
            if(!this.search_data.startTime || !this.search_data.endTime) {
                this.$message({type: 'warning', message: '请选择时间区间'})
                this.getProfile()
                return
            }
            const sTime = this.search_data.startTime.getTime();
            const eTime = this.search_data.endTime.getTime();
            this.allTableData = this.filterTableData.filter((item, indx) => {
                // console.log(item)
                const date = new Date(item.date)
                const time = date.getTime()
                return time >= sTime && time <= eTime
            })
            this.setPaginations()
        }
    }
}
</script>

<style scoped>
.fillContainer {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
}
.btnRight {
    float: right;
}
.search {
    margin-left: 10px;
}

.pagination {
    float: right;
    margin-top: 10px;
}
</style>